import React, { Component } from 'react'
import {Table, Tag, Space,Modal,Tree, message} from "antd";
import myAxios from '../service/myAxios';



  function getMenu(data) {

	if (data == null) {
		return;
	}
	const menuList = []
	for (let i = 0; i < data.length; i++) {
		menuList.push(getChild(data[i]));
	}

	return menuList;

}

function getChild(data) {
	if (data == null) {
		return;
	}

	const menu = {
		title:   data.title,
		key: data.key,
		children: getMenu(data.children)
	}

	return menu;
}


export default class Role extends Component {

  
  

	constructor(props){
		super(props);
		this.state={
			 expandedKeys:([]),
			checkedKeys:[],
			selectedKeys :[],
			autoExpandParent :true,
			pageNum:1,
			pageSize : 7,
			data : [],
			total:0,
			isModalVisible : false,
			treeData : [],
			target : -1
		}
		this.myRef =React.createRef();
	}


	 columns = [
		{
		  title: 'Name',
		  dataIndex: 'name',
		  key: 'name',
		},
		{
		  title: 'description',
		  dataIndex: 'description',
		  key: 'description',
		},
		{
		  title: '操作',
		  key: 'action',
		  render: (text, record) => (
			<Space size="middle">
			  <a onClick={ ()=>{this.showModal(record)}}>分配权限</a>
			  <a>修改角色</a>
			  <a>删除角色</a>
			</Space>
		  ),
		},
	  ];

	  onExpand = expandedKeys => {
		this.setState({
		  expandedKeys,
		  autoExpandParent: false,
		});
	  };
	
	
	   onCheck = (checkedKeysValue) => {
		this.setState({
			checkedKeys: checkedKeysValue,

		  });
	  };
	
	   onSelect = (selectedKeysValue, info) => {
		this.setState({
			selectedKeys: selectedKeysValue,

		  });
	  };

	questData = (pageVO) => {
		myAxios.get("role/getRoleList", pageVO).then((data) => {
		  if (data.code === 1001) {
			const total = data.data.total;
			const rolerlist = data.data.data.map((d) => {
			  d.key = d.id;
			  return d;
			});
			this.setState({
			  total: total,
			  data: rolerlist,

			});
		  }
		});
	  };

	   showModal = (record) => {
		this.setState({
			isModalVisible : true
		})
		const params ={params : record.id}
    	myAxios.get("role/getMenuIds", params).then((data) => {
      if (data.code === 1001) {
			console.log(data.data);
        this.setState({
          selectedKeys:data.data,
		  checkedKeys :data.data,
		  target : record.id
        })


      }
    });

	  }
	
	   handleOk = () => {
			const menusDTO ={
				roleId:this.state.target,
				menuIds: this.myRef.current.props.checkedKeys
			} 
			console.log(menusDTO);
			myAxios.post("role/updatePermission",menusDTO)
			.then((data)=>{
				console.log(data);
				if(data.code === 4001){
					message.success(data.message)
				}
			})


		this.setState({
			isModalVisible : false
		})
	  };
	
	   handleCancel = () => {
		this.setState({
			isModalVisible : false
		})
	  };

componentDidMount(){
	const pageVO = {
		page: this.state.pageNum,
		pagesize: this.state.pageSize,
	  };
	  this.questData(pageVO)
	  const menuList = getMenu(this.props.menuList)
		  this.setState({
			  treeData: menuList
		  })

	}
  
  render() {
	return (
		<>
		<Table
		 columns={this.columns} 
		dataSource={this.state.data} 
		pagination={{
            defaultCurrent: 1,
            current: this.state.pageNum,
            total: this.state.total,
            pageSize: this.state.pageSize,
            showTotal: (total) => {
              return `总共${total}条`;
            },
            onChange: (page, pageSize) => {
              //把当前页数据保存下来作为参数

              this.setState({
                pageSize: pageSize,
                pageNum: page,
              });
              const pageVO = {
                pageNum: page,
                pageSize: pageSize,
              };
              // 后端请求数据
              this.questData(pageVO);
            },
          }}
		/>
		<Modal
		 title="角色权限分配" 
		 visible={this.state.isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}
		 okText="确定"
		 cancelText="取消"
		 >
		<Tree
      checkable
      onExpand={this.onExpand}
      expandedKeys={this.state.expandedKeys}
      autoExpandParent={this.state.autoExpandParent}
      onCheck={this.onCheck}
      checkedKeys={this.state.checkedKeys}
      onSelect={this.onSelect}
      selectedKeys={this.state.selectedKeys}
      treeData={this.state.treeData}
	  ref ={this.myRef}
    />
      </Modal>
</>
	)
  }
}
